<template>
   
         <div style="margin-left:16px">
          <el-skeleton animated :rows="8" :loading="data.isFirst">
  <el-descriptions title="新增部门" direction="vertical" :column="2" border>
                  
                   
                    <el-descriptions-item fixed label="部门名称*">
                        <el-input v-model="data.DPName"></el-input>
                    </el-descriptions-item>
                         <el-descriptions-item fixed label="icon">
                        <el-input v-model="data.icon"></el-input>
                    </el-descriptions-item>
                     <el-descriptions-item fixed label="父级">
                        
                       <el-tag :type="data.swithc==true?'success':'danger'">{{data.parent}}</el-tag> <el-switch
                            v-model="data.swithc"
                             class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            />
                    </el-descriptions-item>
                      <el-descriptions-item fixed label="等级">
                       <el-input-number v-model="data.lv" :min="data.lvmin" />
                    </el-descriptions-item>
                    <el-descriptions-item fixed label="职务">
                        <el-checkbox-group v-model="data.checkzhiwu">
                        <el-checkbox  :disabled="item.lv<data.lv" v-for="item in data.check" :key="item.dutyid" :label="item.dutyname" :value="item.dutyid" />
                       
                        
                     
                            </el-checkbox-group>
                              
                         <!-- <el-radio-group v-model="data.checkduty">
                <el-radio v-for="item in data.radio" :key="item.dutyid" :label="item.dutyid">{{ item.dutyname }}</el-radio>
                        </el-radio-group> -->
                    </el-descriptions-item>
                     <el-descriptions-item fixed label="序号">
                         <el-input-number v-model="data.no" :min="1" />
                    </el-descriptions-item>
                       <el-descriptions-item fixed label="描述"> 
                        <el-input v-model="data.explain"></el-input>
                    </el-descriptions-item>
                      <el-descriptions-item fixed label="操作">
                        <el-button type="success" @click="event.add">确认</el-button>
                    </el-descriptions-item>
                  

                </el-descriptions>
          </el-skeleton>
    </div>
    
</template>

<script setup lang="ts">
import type {Dept_Add_Index_Data} from '../../utils/types';
import {reactive,watchEffect} from 'vue';
import {useRoute} from 'vue-router' ;
import {Get_DeptNameLV,Get_AddDuty,Add_Dept} from '../../api/org/dept';
import router from '@/router';
import { msg } from '@/utils/msg';
const data=reactive<Dept_Add_Index_Data>({
    explain:"",
    icon:"",
    lv:0,
    DPName:"",
    no:0,
    parent:"",
    parentid:"",
    swithc:true,
    lvmin:0,
    isFirst:true,
    check:[],
    checkzhiwu:[],


})
const route=useRoute()


const event={
  async add(){
    if(data.swithc==false){
        data.parentid=null;
    }
   
        const res=await Add_Dept({
            explain:data.explain,
            icon:data.icon,
            DPName:data.DPName,
            parent:data.parentid,
            checkzhiwu:data.checkzhiwu,
            lv:data.lv,
            no:data.no

        });
        console.log(res)
       if(res.code===0){
          msg(res);
    setTimeout(() => {
         router.push('/org/dept');
    }, 1000);
       }
        
    }
}
const method={
    async bind(){
        const res=await Get_DeptNameLV({
            id:data.parentid
        });
       
        data.parent=res.data.name;
        data.lvmin=res.data.lv;
        data.lv=res.data.lv;
        
        const ress=await Get_AddDuty();
        data.check=ress.data;
       data.isFirst=false;
    }
}
watchEffect(()=>{
    data.parentid=route.params.id.toString();
   method.bind();
})

</script>

<style scoped>

</style>